<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Peaks.js Demo Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="titles">
      <h1>Peaks.js</h1>
      <p>
        Peaks.js is a JavaScript library that allows you to display and
        interact with audio waveforms in the browser.
      </p>

      <h2>Demo pages</h2>
      <p>
        The following pages demonstrate various configuration options:
      </p>
      <p>
        <a href="/index.html">Precomputed Waveform Data</a> |
        <a href="/webaudio.html">Web Audio API</a> |
        <a href="/zoomable-waveform.html">Single Zoomable Waveform</a> |
        <a href="/overview-waveform.html">Single Fixed Waveform</a> |
        <a href="/cue-events.html">Cue Events</a> |
        <a href="/set-source.html">Changing the Media URL</a> |
        Multi-Channel Waveform |
        <a href="/custom-markers">Custom Point and Segment Markers</a> |
        <a href="/overlay-segments.html">Overlay Segments</a> |
        <a href="/external-player.html">External Audio Player</a> |
        <a href="/scrollbar.html">Scrollbar</a>
      </p>
      <h2>Demo: Multi-Channel Waveform</h2>
      <p>
        This demo shows how to show a stereo waveform. Use the <b>Select source</b>
        control to switch between pre-computed waveform data, fetched from the
        web server, and waveform data generated in the browser using the Web
        Audio API.
      </p>
      <p>
        The pre-computed waveform data was produced using
        <a href="https://github.com/bbc/audiowaveform">audiowaveform</a>, with
        the following options:
      </p>
      <p>
        <code>audiowaveform -i 07023003.mp3 -o 07023003-2channel.dat -b 8 --split-channels</code>
      </p>
      <p>
        Audio content is copyright BBC, from the <a href="http://bbcsfx.acropolis.org.uk/?q=07023003">BBC Sound Effects</a>
        library, used under the terms of the
        <a href="https://github.com/bbcarchdev/Remarc/blob/master/doc/2016.09.27_RemArc_Content%20licence_Terms%20of%20Use_final.pdf">RemArc Licence</a>.
      </p>
    </div>

    <div class="waveform-container">
      <div id="zoomview-container"></div>
    </div>
    <div class="waveform-container">
      <div id="overview-container"></div>
    </div>

    <div id="demo-controls">
      <audio id="audio" controls="controls">
        <source src="/07023003.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>

      <div id="controls">
        <div>
          <button data-action="zoom-in">Zoom in</button>
          <button data-action="zoom-out">Zoom out</button>
          <label for="amplitude-scale">Amplitude scale</label>
          <input type="range" id="amplitude-scale" min="0" max="10" step="1">
        </div>
        <div>
          <label for="select-source">Select source:</label>
          <select id="select-source"></select>
        </div>
        <div>
          <label for="zoomview-color">Zoomview color</label>
          <input type="color" id="zoomview-color" value="#00e180">
          <label for="overview-color">Overview color</label>
          <input type="color" id="overview-color" value="#cccccc">
        </div>
      </div>
    </div>

    <script src="/peaks.js"></script>
    <script>
      (function(Peaks) {
        var AudioContext = window.AudioContext || window.webkitAudioContext;
        var audioContext = new AudioContext();

        var sources = [
          {
            title: 'Remote',
            mediaUrl: '/07023003.mp3',
            dataUri: {
              arraybuffer: '/07023003-2channel.dat',
            }
          },
          {
            title: 'Web Audio',
            mediaUrl: '/07023003.mp3',
            webAudio: {
              audioContext: audioContext,
              multiChannel: true
            }
          }
        ];

        var options = {
          overview: {
            container: document.getElementById('overview-container'),
            waveformColor: '#cccccc'
          },
          zoomview: {
            container: document.getElementById('zoomview-container'),
            waveformColor: '#00e180'
          },
          mediaElement: document.getElementById('audio'),
          dataUri: {
            arraybuffer: '/07023003-2channel.dat'
          },
          keyboard: true,
          pointMarkerColor: '#006eb0',
          showPlayheadTime: true,
          zoomLevels: [128, 256, 512, 1024, 2048]
        };

        Peaks.init(options, function(err, peaksInstance) {
          if (err) {
            console.log(err.message);
            return;
          }

          console.log('Peaks instance ready');

          document.querySelector('[data-action="zoom-in"]').addEventListener('click', function() {
            peaksInstance.zoom.zoomIn();
          });

          document.querySelector('[data-action="zoom-out"]').addEventListener('click', function() {
            peaksInstance.zoom.zoomOut();
          });

          var select = document.getElementById('select-source');

          for (var i = 0; i < sources.length; i++) {
            select.options[i] = new Option(sources[i].title, i);
          }

          select.addEventListener('change', function(event) {
            var source = sources[event.target.value];

            peaksInstance.setSource(source, function(error) {
              if (error) {
                console.error('setSource error', error);
              }
            });
          });

          var amplitudeScales = {
            "0": 0.0,
            "1": 0.1,
            "2": 0.25,
            "3": 0.5,
            "4": 0.75,
            "5": 1.0,
            "6": 1.5,
            "7": 2.0,
            "8": 3.0,
            "9": 4.0,
            "10": 5.0
          };

          document.getElementById('amplitude-scale').addEventListener('input', function(event) {
            var scale = amplitudeScales[event.target.value];

            peaksInstance.views.getView('zoomview').setAmplitudeScale(scale);
          });

          document.getElementById('zoomview-color').addEventListener('input', function(event) {
            var view = peaksInstance.views.getView('zoomview');

            view.setWaveformColor(event.target.value);
          });

          document.getElementById('overview-color').addEventListener('input', function(event) {
            var view = peaksInstance.views.getView('overview');

            view.setWaveformColor(event.target.value);
          });
        });
      })(peaks);
    </script>
  </body>
</html>
